https://cypress.io logo
Join Discord
Powered by
I have a very simple page. I'm just trying to insu...
# help
l
I have a very simple page. I'm just trying to insure that when I click the links the user is navigated to the right page, and then go back. I read https://filiphric.com/testing-links-with-cypress to no avail. I must be missing something. Here's a SS of what I'm working with and the code.
Copy code
it('checks all links', () => {
  cy.visit('http://localhost:3000/logout')

  cy.contains('login').click()
  cy.location('pathname').should('eq', '/login')
  cy.go('back')
})
Here's a SS of the whole browser window
This is what I'm trying to do from the blog
Copy code
<nav>
  <a href="/blog">Blog</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>
Copy code
it('click all links', () => {

  cy.visit('/')

  // blog page
  cy.contains('blog').click()
  cy.location('pathname').should('eq', '/blog')
  cy.go('back')

  // about page
  cy.contains('about').click()
  cy.location('pathname').should('eq', '/about')
  cy.go('back')

  // contact page
  cy.contains('contact').click()
  cy.location('pathname').should('eq', '/contact')
  cy.go('back')

});
Well I modified the actual page so it reads "You have been logged out. Click here to sign in, or right here to sign up" now I can reference 
'right here'
instead. But that doesn't seem like a valid solution to me.
Copy code
it('checks all links', () => {
  cy.visit('http://localhost:3000/logout')

  cy.contains('a', 'Click here').click()
  cy.location('pathname').should('eq', '/login')
  cy.go('back')

  cy.contains('a', 'right here').click()
  cy.location('pathname').should('eq', '/signup')
  cy.go('back')
})
g
why not? cy.contains command is super powerful and it selects by page text if you provide a single argument. If you provide two, then the first one is selector, and the second is text. Instead of the text, you can also use regular expression - literally the best command ever. https://on.cypress.io/contains and https://glebbahmutov.com/cypress-examples/9.6.0/commands/querying.html#cy-contains
l
Thanks @gray-kilobyte-89541 . I did not realize it accepted regex. That's extra handy! I suppose if it works it work. The thing was I had to change original link from 'here' to 'right here' to get cypress to see it. Also I was trying to target the href path from the tag so the call could be text agnostic. Like if the link name ever got changed the test wouldn't break.
g
Why read the docs if you could spend so much time poking around 😉 then your selector could be better and you would use cy.get following some guidance https://on.cypress.io/best-practices#Selecting-Elements
l
Ha! I've been reading the docs, but I get lost and constantly rerouted to blogs in the search menu. Thanks for the doc links. If I'm ever asking questions where there's already a doc and everything totally throw it at me. My problem is I read the wrong docs looking for what I think I need.
> Why read the docs if you could spend so much time poking around 😉 and believe, I'd love to just read docs while moving slowly through the tutorial, but I'm having to learn on the go. Trial by fire and all that. I am actually doing the Todo list tutorial and applying what I learn from each section to actual production work. I really appreciate your time though.
g
every command is there at https://on.cypress.io/ and I highly recommend using cypress.tips/search and always looking up command and assertion examples from https://glebbahmutov.com/cypress-examples <== this one has a search across 400 Cypress example tests
Like this page has so many querying examples https://glebbahmutov.com/cypress-examples/commands/querying.html
l
Well it looks like I have some serious reading Todo. This is all great.
5 Views
PreviousNext
Powered by